<template>
  <div id="app">

   <view-box>
      <x-header class="header" :left-options ="{showBack:false}">
        <div slot="left">{{title.left}}</div>
        <div>{{title.main}}</div>
        <div slot="right">{{title.right}}</div>
      </x-header>

      <tab class="tab">
        <tab-item selected>推荐</tab-item>
        <tab-item>要闻</tab-item>
        <tab-item>游戏</tab-item>
        <tab-item>科技</tab-item>
        <tab-item>娱乐</tab-item>
        <tab-item>房产</tab-item>
        <tab-item>股票</tab-item>
      </tab>

        <router-view></router-view>
      

      <tabbar class="bottom">
        <tabbar-item :link="{name: 'home'}"><img src="./asset/icon_nav_button.png" slot="icon"><span slot="label">首页</span></tabbar-item>
        <tabbar-item :link="{name: 'rec'}"><img src="./asset/icon_nav_article.png" slot="icon"><span slot="label">推荐</span></tabbar-item>
        <tabbar-item :link="{name: 'love'}"><img src="./asset/icon_nav_cell.png" slot="icon"><span slot="label">我的</span></tabbar-item>

        

      </tabbar>
   </view-box>

  </div>
</template>

<script>

  import { ViewBox, XHeader,Tabbar,TabbarItem, Tab, TabItem} from 'vux'

  export default {
    name: 'App',
    data(){
      return {
        title: {left: '直播', main: '网易',right:'搜索' },
      }
    },
    components: {
      ViewBox,
      XHeader,
      Tabbar,
      TabbarItem,
      Tab,
      TabItem
    }
 
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';
html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
#app { 
   height: 100%; 

  .header { 
    position: absolute; 
    left: 0; top:0; 
    width: 100%; 
    z-index: 9;
  }
  .tab {
     position: absolute;
     top:46px;
     left: 0;
     width:100%;
     z-index: 10;
  }
   
}
</style>
